<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <%@include file="../common/head.jspf" %>
    </head>

    <body class="sb-l-o sb-r-c" data-menu="" data-list="#li_employee">

        <!-- 主体内容开始 -->
        <div id="main">

            <!--侧边导航栏-->
            <%@include file="../common/sidebar.jspf" %>

            <!-- Start: Content-Wrapper -->
            <section id="content_wrapper">

                <!-- 顶部导航 -->
                <header id="topbar">
                    <div class="topbar-left">
                        <ol class="breadcrumb">
                            <li class="crumb-active">
                                <span>软擎科技</span>
                            </li>
                            <li class="crumb-icon">
                                <a href="dashboard"><span class="glyphicon glyphicon-home"></span></a>
                            </li>
                            <li class="crumb-icon">
                                <a href="employee/list">员工列表</a>
                            </li>
                            <!-- 当前页 -->
                            <li class="crumb-trail">员工个人主页</li>
                        </ol>
                    </div>
                    <div class="topbar-right">
                        <!-- 登录信息 -->
                        <%@include file="../common/session.jspf" %>
                    </div>
                </header>
                <!-- 顶部导航结束 -->

                <!-- 页面内容开始 -->
                <section id="content" class="pn" data-id="${model.id}" data-ea="${EmployeeSession.permissions.contains('EMPLOYEE_ADMIN')}" data-admin="${EmployeeSession.isAdmin()}" data-loginname="${model.loginName}">
                    <div class="pv30 ph40 bg-light dark br-b br-grey posr">

                        <div class="table-layout">
                            <div class="w200 text-center pr30 hidden">
                                <img src="${rootPath}/img/avatar.jpg" class="responsive">
                            </div>
                            <div class="va-t m30">
                                <h2 class="mb20"> ${model.loginName} <small> ${model.name}</small></h2>
                                <p class="fs15 mb10"><span class="glyphicon glyphicon-earphone fs16 text-system mr5"></span>手机号码：${model.mobile}</p>
                                <p class="fs15 mb10"><span class="glyphicons glyphicons-nameplate fs16 text-primary mr5"></span>身份证号：${model.idNumber}</p>
                                <p class="fs15 mb10"><span class="glyphicons glyphicons-user text-alert mr5"></span>员工角色：
                                    <span id="roleSpan"></span>
                                    <a href="permissions" class="text-muted mt5 fs13 shide"><i class="fa fa-edit mr5"></i>修改</a>
                                </p>
                            </div>

                            <div class="btn-group profile-settings-btn pull-right">
                                <button type="button" class="btn btn-default dropdown-toggle pl20" data-toggle="dropdown"><i class="fa fa-wrench mr5"></i>相关操作
                                    <span class="caret ml5"></span>
                                </button>
                                <ul class="dropdown-menu pull-right" role="menu">
                                    <li>
                                        <a href="javascript:;"><span class="glyphicons glyphicons-message_plus mr5"></span>发站内信</a>
                                    </li>
                                    <li class="divider"></li>

                                    <c:if test="${EmployeeSession.employee.loginName == model.loginName}">
                                        <li>
                                            <a href="employee/changePassword"><span class="glyphicons glyphicons-cogwheel mr5"></span>修改密码</a>
                                        </li>
                                    </c:if>
                                    <%-- 仅有超级管理员与具有EMPLOYEE_ADMIN权限的员工可以对员工进行编辑、重置密码、冻结账号等操作 --%>
                                    <c:if test="${EmployeeSession.isAdmin() || EmployeeSession.permissions.contains('EMPLOYEE_ADMIN')}">
                                        <li>
                                            <a href="employee/edit/${model.id}" target="_blank"><span class="glyphicons glyphicons-edit mr5"></span>编辑员工</a>
                                        </li>
                                        <li id="changeStatus">
                                            <a href="employee/changeStatus/${model.id}"><span class="glyphicons ${model.enabled == true ? 'glyphicons-lock' : 'glyphicons-unlock'} mr5"></span>${model.enabled == true ? '冻结账号' : '激活账号'}</a>
                                        </li>
                                        <li>
                                            <a href="employee/resetPassword/${model.id}"><span class="glyphicons glyphicons-refresh mr5"></span>重置密码</a>
                                        </li>
                                    </c:if>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="p25 pt35">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <span class="panel-icon"><i class="fa fa-star"></i></span>
                                        <span class="panel-title"> 账号信息</span>
                                    </div>
                                    <div class="panel-body pn">
                                        <table class="table mbn tc-med-2 tc-bold-last">
                                            <thead>
                                                <tr class="hidden">
                                                    <th>First Name</th>
                                                    <th>Revenue</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span class="fa fa-bolt fs16 text-info ml5 mr10"></span>账号状态</td>
                                                    <td>${model.enabled == true ? '正常' : '冻结'}</td>
                                                </tr>
                                                <tr>
                                                    <td><span class="fa fa-sign-in fs16 text-info mr10"></span>上次登录</td>
                                                    <td>2015/04/01</td>
                                                </tr>
                                                <tr>
                                                    <td><span class="fa fa-edit fs14 text-info mr10"></span>注册日期</td>
                                                    <td>2015/03/25</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="panel mt20">
                                    <div class="panel-heading">
                                        <span class="panel-icon"><span class="glyphicons glyphicons-keys"></span></span>
                                        <span class="panel-title"> 员工权限</span>
                                        <div class="widget-menu pull-right shide">
                                            <a class="btn btn-default btn-xs" href="permissions" role="button" target="_blank"><i class="fa fa-edit text-muted-lighter mr5"></i>修改</a>
                                        </div>
                                    </div>
                                    <div class="panel-body" id="permissionPanel">
                                        <div class="fs16 text-muted mt25 mb35 text-center load-info"><span class="fa fa-spin fa-spinner mr10"></span>加载中 ..</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="tab-block">
                                    <ul class="nav nav-tabs ">
                                        <li class="active">
                                            <a href="#tab1" data-toggle="tab">员工信息</a>
                                        </li>
                                        <li>
                                            <a href="#tab-operations" data-toggle="tab">操作记录</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content pn">
                                        <div id="tab1" class="tab-pane active p20">
                                            <div class="fs30 text-muted mt100 mb100 text-center text-muted-lighter">
                                                <span class="glyphicons glyphicons-alarm mr10"></span>敬请期待
                                            </div>
                                        </div>
                                        <%--
                                        <div id="tab1" class="tab-pane active p20">
                                            <div class="form-horizontal no-selection" id="permissions">
                                                <div class="fs16 text-muted mt25 mb35 text-center load-info"><span class="fa fa-spin fa-spinner mr10"></span>加载中 ..</div>
                                            </div>
                                        </div>
                                        --%>
                                        <div id="tab-operations" class="tab-pane p20">
                                            <div class="panel mn">
                                                <div class="panel-heading h-50 lh50 br-t-n">
                                                    <span class="panel-title">
                                                        <code><i class="fa fa-rocket mr5"></i>共<span id="operationCount"></span>条记录</code>    
                                                    </span>
                                                    <div class="widget-menu pull-right"></div>
                                                </div>
                                                <div class="panel-body pn">
                                                    <table class="table table-striped table-text-center" id="operationList">
                                                        <thead>
                                                            <tr>
                                                                <th>操作类型</th>
                                                                <th>操作时间</th>
                                                                <th>备注</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- 页面内容结束 -->

            </section>
        </div>
        <!-- 主体内容结束 -->

        <script type="text/x-tmpl-mustache" id="permissionTemplate">
            {{#result}}
            <div class="checkbox-custom checkbox-primary mb5">
            <input type="checkbox" value="{{name}}" id="{{key}}" class="permission_checkbox">
            <label for="{{key}}">{{key}}{{{mode}}}</label>
            </div>
            {{/result}}
        </script>
        <!-- 公共函数 -->
        <%@include file="../common/scripts.jspf" %>
        <script type="text/javascript">
            var opTypeMap = {};
            <c:forEach var="optype" items="${OperationType}">
            opTypeMap["${optype}"] = "${optype.key}";
            </c:forEach>
        </script>
        <script type="text/javascript" src="${rootPath}/js/pages/employee/index.js"></script>
    </body>
</html>